<template>
  <Card>
    <p slot="title">设备销量统计</p>
    <div class="search-con search-con-top">
      <div>
        运营商户：
        <Select v-model="searchData.operator_id" style="width:200px" filterable @on-change="operatorListChange">
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        柜机商户：
        <Select v-model="searchData.franchiser_id" style="width:200px" filterable @on-change="franchiserListChange">
          <Option v-for="item in franchiserList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        分类名称：
        <Input v-model="searchData.cate_name" placeholder="请输入..." style="width: 200px"></Input>
        商品名称：
        <Input v-model="searchData.product_name" placeholder="请输入..." style="width: 200px"></Input>
        设备名称：
        <Input v-model="searchData.name" placeholder="请输入..." style="width: 200px"></Input>
      </div>
      <div style="margin-top: 10px;">
        设备IMEI：
        <Input v-model="searchData.imei" placeholder="请输入..." style="width: 200px"></Input>
        设备编号：
        <Input v-model="searchData.serial" placeholder="请输入..." style="width: 200px"></Input>
        所属街道：
        <Select v-model="searchData.street_id" style="width:200px" @on-change="streetListChange">
          <Option v-for="item in streetList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        所属小区：
        <Select v-model="searchData.community_id" style="width:200px">
          <Option v-for="item in communityList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        时间范围：
        <DatePicker :clearable=false @on-change="datePickChange" type="daterange" placement="bottom-end" placeholder="请选择"
          style="width: 200px" :value="timeArr" format="yyyy-MM-dd" confirm></DatePicker>
        <Button @click="search" type="primary" shape="circle" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" shape="circle" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
      </div>
    </div>
    <br>
    <Table :columns="columns" :data="list" border>
      <template slot="typeSlot" slot-scope="{ row, index }">
        <p v-if="row.type == 1">固定重量商品</p>
        <p v-else>称重商品</p>
      </template>
      <template slot="buyAmountSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.buy_amount/100).toFixed(2)}} </p>
      </template>
      <template slot="saleAmountSlot" slot-scope="{ row, index }">
        <p>{{parseFloat(row.sale_amount/100).toFixed(2)}} </p>
      </template>
      <template slot="numSlot" slot-scope="{ row, index }">
        <p v-if="row.type == 2">{{parseFloat(row.sale_count * 2/1000).toFixed(2)}}斤 </p>
        <p v-else>{{row.sale_count}}个 </p>
      </template>
      <template slot="profitSlot1" slot-scope="{ row, index }">
        <p>{{parseFloat((row.sale_amount - row.buy_amount)/100) .toFixed(2)}} </p>
      </template>
      <template slot="makeSlot" slot-scope="{ row, index }">
        <Button @click="detail(row)" type="info" style="margin-top: 5px">销量详情</Button>
      </template>
    </Table>
    <br>
    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>
    <Modal v-model="modal" width="70%">
      <p slot="header">
        <Icon type="ios-information-circle"></Icon>
        <span style="font-size: 20px;">设备销售详情</span>
      </p>
      <Table :columns="detailColumns" :data="detailList" border>
        <template slot="typeSlot" slot-scope="{ row, index }">
          <p v-if="row.type == 1">固定重量商品</p>
          <p v-else>称重商品</p>
        </template>
        <template slot="buyPriceSlot" slot-scope="{ row, index }">
          <p>{{parseFloat(row.buy_price/100).toFixed(2)}} </p>
        </template>
        <template slot="numSlot" slot-scope="{ row, index }">
          <p v-if="row.type == 2">{{parseFloat(row.num * 2/1000).toFixed(2)}}斤 </p>
          <p v-else>{{row.num}}个 </p>
        </template>
        <template slot="priceSlot" slot-scope="{ row, index }">
          <p>{{parseFloat(row.unit_sale_price/100).toFixed(2)}}元/斤 </p>
        </template>
        <template slot="buyAmountSlot" slot-scope="{ row, index }">
          <p>{{parseFloat(row.buy_amount/100).toFixed(2)}} </p>
        </template>
        <template slot="totalSlot" slot-scope="{ row, index }">
          <p>{{parseFloat(row.p_total_price).toFixed(2)}} </p>
        </template>
        <template slot="profitSlot" slot-scope="{ row, index }">
          <p>{{parseFloat(row.p_total_price - (row.buy_amount/100) ).toFixed(2)}} </p>
        </template>
      </Table>
      <br>
      <Page :total="detailTotal" show-sizer show-total show-elevator @on-change="changePage"
        @on-page-size-change="changeSize"></Page>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>

<script>
import { standardTimeFormat, formatDate } from '@/libs/tools'
export default {
  data() {
    return {
      searchData: {
        page: 1,
        limit: 10
      },
      timeArr: [],
      // 列表
      columns: [
        {
          title: '运营商',
          key: 'operator_name',
        },
        {
          title: '柜机商户',
          key: 'franchiser_name',
        },
        {
          title: '设备名称',
          key: 'cupboard_name',
        },
        {
          title: '设备编号',
          key: 'serial',
        },
        {
          title: '商品名称',
          key: 'name',
        },
        {
          title: '分类名称',
          key: 'type',
          slot: 'typeSlot'
        },
        {
          title: '商品类型',
          key: 'cate_name',
        },
        {
          title: '进货成本总价(元)',
          key: 'buy_amount',
          slot: 'buyAmountSlot'
        },
        {
          title: '销售数量',
          key: 'sale_count',
          slot: 'numSlot'
        },
        {
          title: '销售额(元)',
          key: 'sale_amount',
          slot: 'saleAmountSlot'
        },
        {
          title: '利润(元)',
          slot: 'profitSlot1'
        },
        {
          title: '操作',
          slot: 'makeSlot'
        }
      ],
      detailColumns: [
        {
          title: '商品名称',
          key: 'name',
        },
        {
          title: '类型',
          key: 'type',
          slot: 'typeSlot'
        },
        {
          title: '设备名称',
          key: 'cupboard_name',
        },
        {
          title: '设备IMEI',
          key: 'imei',
        },
        {
          title: '设备编号',
          key: 'serial',
        },
        {
          title: '进货价',
          key: 'buy_price',
          slot: 'buyPriceSlot'
        }, {
          title: '数量',
          key: 'num',
          slot: 'numSlot',
        }, {
          title: '销售价',
          key: 'unit_sale_price',
          slot: 'priceSlot',
        }, {
          title: '成本(元)',
          key: 'buy_amount',
          slot: 'buyAmountSlot',
        }, {
          title: '总价(元)',
          key: 'p_total_price',
          slot: 'totalSlot',
        }, {
          title: '利润(元)',
          slot: 'profitSlot',
        }, {
          title: '时间',
          key: 'created_at',
        }
      ],
      // 数据
      list: [],
      total: 0,
      //运营商列表
      operatorList: [],
      //柜机商列表
      franchiserList: [],
      city_id: 0,
      //街道列表
      streetList: [],
      //小区列表
      communityList: [],
      // 详情列表
      detailList: [],
      detailTotal: 0,
      // 详情弹窗
      modal: false,
    }
  },
  methods: {
    // 查询管理员信息
    getSaleStatisticsList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/adminstatistics/getDeviceSaleStatisticsList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getSaleStatisticsList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getSaleStatisticsList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getSaleStatisticsList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getSaleStatisticsList();
    },
    //运营商户列表
    getOperatorList() {
      this.$axios('/adminstatistics/getOperatorList', {}).then(res => {
        this.operatorList = res;
      });
    },
    //运营商户选择框change事件
    operatorListChange(value) {
      this.operatorId = value;
      this.$axios('/adminstatistics/getFranchiserListByOperatorId', { operator_id: value }).then(res => {
        this.franchiserList = res;
      });
      this.franchiserListChange(0);
    },
    //街道列表
    franchiserListChange(value) {
      this.$axios('/adminregion/getStreetList', { operator_id: this.operatorId, franchiser_id: value }).then(res => {
        this.streetList = res;
      });
    },
    //街道切换
    streetListChange(value) {
      this.$axios('/adminregion/getCommunityList', { street_id: value }).then(res => {
        this.communityList = res;
      });
    },
    //日期选择
    datePickChange(value) {
      this.searchData.startTime = value[0];
      this.searchData.endTime = value[1];
    },
    detail(row) {
      console.log(row)
      let params = {
        product_id: row.product_id,
        cupboard_id: row.cupboard_id,
        start_time: this.searchData.startTime,
        end_time: this.searchData.endTime
      };
      this.$axios('/adminstatistics/deviceSaleDetail', params).then(res => {
        this.detailList = res.data;
        this.detailTotal = res.total;
        this.modal = true;
      });
    },
  },
  created() {
    let date = new Date();
    let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    let startTime = formatDate(new Date(endTime), "yyyy-MM-dd");
    endTime = formatDate(new Date(), "yyyy-MM-dd");
    this.timeArr[0] = startTime
    this.timeArr[1] = endTime
    this.searchData.startTime = startTime;
    this.searchData.endTime = endTime;
    this.getSaleStatisticsList();
    this.getOperatorList();
  }
}
</script>
<style>

</style>
